<template>
    <div class="category-page">
        <!-- 头部标题 -->
        <van-nav-bar title="分类" fixed placeholder left-text="返回" left-arrow @click-left="$goBack" />
        <div class="category-page-center" style="display: flex">
            <!-- 左侧 -->
            <div class="category-page-left">
                <van-sidebar v-model="activeKey" >
                    <van-sidebar-item v-for="item in allData" :key="item.goodsId" :title="item.goodsName" />
                </van-sidebar>
            </div>
            <!-- 右侧 -->
            <div class="category-page-right" v-if="allData[activeKey]">
                <div v-for="item in allData[activeKey].secondLevelCategoryVOS" :key="item.goodsId">
                    <h3>{{ item.goodsName}}</h3>
                    <van-grid :column-num="3">
                        <van-grid-item
                            v-for="shopItem in item.thirdLevelCategoryVOS"
                            :key="shopItem.goodsId"
                            :icon="shopItem.goodsCoverImg"
                            :text="shopItem.goodsName"
                            @click="goshop(shopItem)" 
                        >
                            <van-image :src="shopItem.goodsCoverImg" />
                            <span class="SPname">{{ shopItem.goodsName}}</span>
                        </van-grid-item>
                    </van-grid>
                </div>
            </div>
            </div>


        <!-- 底部导航 -->
        <van-tabbar v-model="active" placeholder route >
            <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o" to="/sort">分类</van-tabbar-item>
            <van-tabbar-item :badge="shopCarData.length" icon="shopping-cart-o" to="/shopcar">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o" to="/myui">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      valueT: [["生活电器", "家用电器", "厨房电器"], ["外套"]],
      value: [
        [
          "https://image3.suning.cn/uimg/cms/img/158814610028564786.png",
          "https://image1.suning.cn/uimg/cms/img/158563960546644155.png",
          "https://image4.suning.cn/uimg/cms/img/155834533402087655.jpg",
        ],
        [
          "https://imgservice.suning.cn/uimg1/b2c/image/IjDNn33zrJXQQUrluE5t0Q.jpg_160w_160h_4e",
        ],
      ],
      activeKey: 0,

      allData: [],
      shopCarData: localStorage.getItem("shopCarData")? JSON.parse(localStorage.getItem("shopCarData")) : [],
    };
  },
  created() {
    // 请求服务端的分类数据
    this.$axios.get("http://localhost:8888/category").then((res) => {
      console.log(res.data.data, "商品分类数据");
      this.allData = res.data.data;
    });
  },
  methods: {
    onChange(index) {
      Notify({ type: "primary", message: index });
    },
    goshop(shopItem) {

        this.$router.push({
            path: '/shopitem-sort',
            query: {
                goodsId: shopItem.goodsId,
                goodsName: shopItem.goodsName,
                goodsCoverImg: shopItem.goodsCoverImg,
                sellingPrice:shopItem. sellingPrice
     
            }
        });
    }
  },
};
</script>

<style scoped lang="less">
.category-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .category-page-center {
    flex: 1;
    overflow: hidden;
    display: flex;
    .category-page-left {
      overflow-y: auto;
    }
    .category-page-right {
      overflow-y: auto;
      flex: 1;
    }
  }
}

.van-sidebar {
  width: auto;
}
.van-image {
  height: 50px;
}
.SPname {
  font-size: 10px;
}
</style>